[CSS] 속성 선택자를 사용해 특정 속성을 가진 요소에 스타일 부여방법

CSS의 선택자 지정 방법을 알아봅니다. 여기서는 엘리먼트의 속성을 선택하는 경우 사용 가능한 선택자 방법입니다.

# CSS 속성을 선택자로 지정하는 방법

DOM 엘리먼트, 태그 요소는 여러가지 어트리뷰트, 속성을 가지고 있습니다. 이 값을 가지고 CSS에서 선택하는 방법으로 속성 선택자를 사용하는 방법입니다 키워드는 []를 사용하고 이를 사용하여 해당하는 속성을 가진 요소에만 스타일 지정을 할 수가 있죠. 그럼 아래를 봐주세요.

! CSS 속성 선택자 사용방법

먼저 간단한 사용방법입니다. 속성선택자를 사용하려면 아래와 같이 중괄호[]를 넣고 그 안에 해당 속성을 넣어주어 사용합니다. id 또는 class외에도 사용자 정의 속성역시 사용이 가능합니다. 참고로 CSS 속성 선택자는 IE 7(인터넷 익스플로러 7)이상의 버전에서 지원합니다.

a[속성이름="속성값"] { color: red; }


a 태그에 속성을 찾아 color: red를 적용하는 코드입니다. 이처럼 속성을 기준으로 찾을 수 있습니다.

! CSS 속성 선택자 사용 예제

간단한 예제입니다. a 태그는 href 속성 값을 가지고 있죠. 일치하는 값을 찾아 스타일을 적용해보려 합니다.

위의 href 속성을 선택하기 위해 아래의 방법을 사용합니다.


다양한 속성을 가진 태그가 필요하므로 아래와 같이 있다고 가정합니다.

이제 위 태그에 적용하는 CSS 코드입니다.

만약 두개의 속성 선택자를 지정하려면 아래와 같이 사용하면 가능합니다.

! 여러개의 멀티 속성에 스타일 적용하기

예를들어... a 태그에서 href 속성과 class 속성을 가진 요소에 폰트색을 red로 적용한다면!

보시는 것과 멀티로 적용하는 것도 가능합니다.